// components/wn-swiper/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    imgUrls: Array,
    extratswiper: String,
    width: Number,
    height: Number,
    loop: Boolean
  },

  /**
   * 组件的初始数据
   */
  data: {
    nowLeft:  0,
    dot: [],
    startX: 0,
    distantX: 0,
    resultX: 0,
    historyLeft: 0,
    nowIndex: 0
  },

  /**
   * 组件的方法列表
   */
  attached() {
    // var length = this.data.imgUrls.length
    // console.log('图片', this.data.imgUrls)
  },
  methods: {
    dotObjInit() {
      var length = this.data.imgUrls.length,dot = [];
      console.log("点", length)
      if (length > 0) {
        for (var i = 0; i < length; i++) {
          dot.push({ active: "" })
        }
        dot[0].active = "active";
        this.setData({
          dot: dot
        })
      }
      
    },
    swiperInit() {
      // console.log(this.data.imgUrls)
      var that = this,
        length = this.data.imgUrls.length,
        // dotDom = this.$refs.dot,
        // dotLi = dotDom.querySelectorAll("li"),
        timer = null,
        // screenWidth = window.screen.availWidth,
        loopInterval = 6 * 1000,
        nowActive = 0,
        nowLeft = 0;
      
      timer = setInterval(loop, loopInterval);
      // that.dotObjInit()
      function loop() {
        var moveWidth = that.data.width;
        if (nowActive < length - 1) {
          nowActive++;
          nowLeft = -1 * nowActive * moveWidth;
          that.setData({
            nowLeft: nowLeft
          })
        } else {
          nowActive = 0;
          nowLeft = 0;
          that.setData({
            nowLeft: nowLeft
          })
        }
        that.setDot(nowActive, length); //设置指示点位置
       
        // swiperItem[nowActive].className = "swiper-item active"
        // dotLi[nowActive].className = "active";
      }
    },
    setDot(index, length) {
      var that = this,
            dot = this.data.dot;
      for (var i = 0; i < length; i++) {
        dot[i].active = '';
      }
      dot[index].active = "active";
      that.setData({
        dot: dot
      })
    },
    handleTouchStart(e) {
      var touches = e.touches[0];
      this.startX = touches.clientX;
      this.setData({
        historyLeft: this.data.nowLeft
      })
    },
    handleTouchMove(e) {
      var touches = e.changedTouches[0],
            that = this,
            distantX = 0;
      distantX = touches.clientX - that.startX;
      // console.log(typeof (that.distantX))
      console.log(this.data.historyLeft)
      that.resultX = that.data.historyLeft + distantX
      // console.log(that.historyLeft)
      that.setData({
        distantX: distantX,
        nowLeft: that.resultX
      })
    },
    handleTouchEnd(e) {
      var resultX = Math.abs(this.data.distantX), 
            left = this.data.distantX > 0 ? false : true,
            maxLeft = (this.data.imgUrls.length - 1) * -1 * this.data.width ,
            minLeft = 0,
            that = this,
            nowIndex = this.data.nowIndex,
            length = this.data.imgUrls.length;
          // console.log(resultX)
      if (resultX > 80 && left) {
        if (that.data.historyLeft > maxLeft){
          that.setData({
            nowLeft: that.data.historyLeft - this.data.width,
            nowIndex: nowIndex + 1
          })
          that.setDot(nowIndex + 1, length)
        } else {
          that.setData({
            nowLeft: that.data.historyLeft
          })
        }
      } else if (resultX > 80 && !left){
        if (that.data.historyLeft < 0){
          that.setData({
            nowLeft: that.data.historyLeft + this.data.width,
            nowIndex: nowIndex - 1
          })
          that.setDot(nowIndex - 1, length)
        } else {
          that.setData({
            nowLeft: that.data.historyLeft
          })
        }
      } else {
        that.setData({
          nowLeft: that.data.historyLeft
        })
      }
    },
    showBigPic() {
      const data = this.data.imgUrls
      let imgList = []
      data.forEach(item => {
        imgList.push(item.imgUrl)
      })
      wx.previewImage({
        current: '', // 当前显示图片的http链接
        urls: imgList // 需要预览的图片http链接列表
      })
    }

  }
})
